<button class="Btn">
   <svg class="logoIcon" height="1em" viewBox="0 0 576 512"><path d="M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6H426.6c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z"></path></svg>
   <span class="tooltip">Premium</span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, premium */
.Btn {
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(-50deg,rgb(39, 107, 255),rgb(112, 186, 255),rgb(39, 107, 255));
  background-size: 250%;
  background-position: left;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition-duration: .5s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.logoIcon {
  fill: white;
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background: linear-gradient(to right,rgb(39, 107, 255),rgb(108, 184, 255));
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: linear-gradient(45deg,rgb(39, 107, 255),rgb(108, 184, 255));
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  bottom: -15%;
  transition-duration: .3s;
}

.Btn:hover .tooltip {
  top: -50px;
  opacity: 1;
  transition-duration: .3s;
}

.Btn:hover {
  background-position: right;
  transition-duration: .5s;
}
</style>
